<html>
<head>
<meta charset="utf-8">
</head>
<script>
  var context;
  var x=10;
	var y=100;
	var dx=2; //tang giam toc do
	var dy=2;
  function draw(){
  context= myCanvas.getContext('2d');
  context.clearRect(0,0,300,300);
	context.beginPath();
    context.fillStyle="#0000ff";
    // Draws a circle of radius 20 at the coordinates 10,100 on the canvas
    context.arc(x,y,20,0,Math.PI*2,true);
	context.closePath();
    context.fill();
	//boundary logic to create a imagging wall
	if( x<0 || x>300) dx=-dx;
	if( y<0 || y>300) dy=-dy;
	x+=dx;
	y+=dy;
  }
  setInterval(draw,1); //tang giam toc do
</script>
<body>
  <canvas id="myCanvas" width="300" height="300">
  </canvas>
</body>
</html>